/* basic */
body{
	font-family: 'Nanum Gothic', sans-serif;
}
#main {
	margin-top: 10px;
	width: 1000px;
	margin: 0 auto;
	
}
#top{
	width: 100%;
}
#title{
	text-align: center;
	font-size: 30px;
	color: #7dc8cc;
	padding-top: 5px;
	padding-bottom: 15px;
}

#contents {
	width: 100%;
	padding-top:10px;
}

#main_left{
	width: 15%;
	height: 500px;
	float: left;
}

#main_center {
	width: 70%;
	float: left;
}

#main_right{
	width: 14%;
	height: 300px;
	float: left;
	margin-left:10px;
}

#main_footer{
	width: 100%;
	height: 100px;
	margin-top: 10px;
	float: left;
	
}


/* 기본 네비게이션 */
nav{ 
  background-color: #7dc8cc;

}
.menu{ display: block;}
.menu li{
  margin-left: 10px;
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li a{
  font-weight: 600;
  text-decoration: none;
  padding: 12px;
  display: block;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,
.menu li:hover > a{
  color: #fff;
  background: #bbb;
}

/* hide the second level*/
.menu ul{
  display: none;
  margin: 0;
  padding: 0;
  width: 150px;
  position: absolute;
  top: 43px;
  left: 0px;
  background: #1b9fa6;
}

/* display second level on hover*/
.menu li:hover > ul{
  display: block;
}
.menu ul li{
  display: block;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a{
  font-size: 12px;
  display: block;
  border-left: 3px solid #fff;
  
}

.menu ul li a:hover,
.menu ul li:hover > a{
  background-color: #9CA3DA;
  border-left: 3px solid #fff;
}

/* change level 3 menu positions */
.menu ul ul {left: 149px;
	top: 0px;
}

/* ----------------------화면이 작어질때---------------------- */
@media (max-width: 767px) {
 
    .menu{display:none;}
 
    .mobile-menu{display:block;
    margin-top:100px;}
     
    nav{margin:0;padding: 0;
    background:none;}
    ul{ margin: 0;padding: 0;}
    .menu li{display:block;
    margin:0;}
     
    .menu li a {background:#ffffff;
    color:#797979;
    border-top:1px solid #e0e0e0;
    border-left:3px solid #ffffff;}
     
    .menu li a:hover, .menu li:hover > a{
    background:#9CA3DA;
    color:#fff;
    border-left:3px solid #fff;}
     
    /*level 2 and 3 - make same width as all items*/
    .menu ul {
      display:block;
      position:relative;
      top:0;
      left:0;
      width:100%;}
     
    .menu ul ul {left:0;}
 
}/*end media queries*/


/* ------------------------------------------------기술 차트 ----------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,200);
	
	*{margin:0;padding:0;font-family: 'Raleway',sans-serif;}

	.skills{
		width:400px;
		margin:40px auto;
		padding:20px;
		background:#fff;
		box-shadow: 0 3px 5px 2.5px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 3px 5px 2.5px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0 3px 5px 2.5px rgba(0, 0, 0, 0.5);
	}
	
	.skills h2{
		text-align:center;
		width:100%;
		margin: 0 0 20px 0;
	}	
	
	.skills .chart{
		position:relative;
		display: block;
		padding: 10px;
		margin: 0 0 3px 0;
		text-align: center;
		position: relative;
		border: 4px double rgba(0,0,0,0.1);
		background:rgba(255,255,255,0.5);
	}
		
	.skills .chart:after{
		content: "";
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		box-shadow: inset 0 3px 5px 2.5px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: inset 0 3px 5px 2.5px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: inset 0 3px 5px 2.5px rgba(0, 0, 0, 0.5);
	}
	
	.skills .chart span{
		position: absolute;
		left: 0;
		top:0;
		background: url("http://www.kriesi.at/themes/flashlight/wp-content/themes/flashlight/images/patterns/light-diagonal-wide-left-to-right.png") repeat rgba(0, 155, 119, 0.8);
		z-index:0;
		height:100%;
		width:0px;
		-webkit-transition: all ease-in-out 1s;
		-moz-transition: all ease-in-out 1s;
		-ms-transition: all ease-in-out 1s;
		-o-transition: all ease-in-out 1s;
		transition: all ease-in-out 1s;
	}

	.skills .chart p{
		position: relative;
		z-index: 100;
		margin: 0;
		color:#333;
		font-size: 0.9em;
		line-height:1.2em;
	}
